<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Iframe Title</title>
<meta charset=utf-8 />
<style type="text/css">
<!--
body {
-moz-box-shadow: 4px 4px 5px #888;
-webkit-box-shadow: 4px 4px 5px #888;
box-shadow: 4px 4px 5px #888;
}
-->
</style>
</head>
<body onload=sendSize() style='padding:5px;border-radius:10px;border:2px solid lightblue;background-color:transparent;margin:0;font-family:arial'>
<div id=containerDiv style=background-color:#ABCDEF >
<table border=1  style='width:360px;border-collapse: collapse;'>

<tr>
<td>
<table style=width:100% >
<tr ><td id=drawDigitalReadoutTopTable style='width:90%;' align=center ><span id=drawDigitalReadoutEditSpan>Draw Digital Readouts</span>
&nbsp; &nbsp; &nbsp; Scale:<select  onchange=parent.changeDigitalReadout()  id="digitalReadoutScaleSelect">
<option>1.0</option>
<option>.9</option>
<option>.8</option>
<option selected>.7</option>
<option>.6</option>
<option>.5</option>
<option>.4</option>
<option>.3</option>
<option>.2</option>
<option>.1</option>
</select>

</td><td align=right> <button onClick=parent.closeDrawDigitalReadout()  >X</button></td></tr>
<tr><td align=center colspan=2>

HMI Symbol SVG Source:<input type=checkbox  title="Show SVG source for this element"  id=sourceHMICheck  />


</td></tr>

</table>
</td>

</tr>

        <tr><td>Title:<input onkeyup=parent.changeDigitalReadout() type="text" autocomplete="off"  id=digitalReadoutTitleValue style='width:140px;' value="Digital Readout Title" /></td></tr>
        <tr><td>Maximum Value:<input onkeyup=parent.changeDigitalReadout() type="text" autocomplete="off"  id=digitalReadoutMaxValue style='cursor:default;width:50px;'  value="100" /></td></tr>
        <tr><td>Units Of Measurement:<input onkeyup=parent.changeDigitalReadout() type="text" autocomplete="off"  id=digitalReadoutUnitValue style='cursor:default;width:70px;' value="degrees F" /></td></tr>
        <tr><td>Face <span id=digitalReadoutFaceColorBg>Color</span>: <select id=digitalReadoutFaceColorSelect onChange=parent.digitalReadoutFaceColorSelected()></select></td></tr>
        <tr><td>Numbers Border <span id=digitalReadoutBorderColorBg>Color</span>: <select id=digitalReadoutBorderColorSelect onChange=parent.digitalReadoutBorderColorSelected()></select></td></tr>
        <tr><td>Numbers <span id=digitalReadoutNumberColorBg>Color</span>: <select id=digitalReadoutNumberColorSelect onChange=parent.digitalReadoutNumberColorSelected()></select></td></tr>
        <tr><td>Numbers Background <span id=digitalReadoutNumberBgColorBg>Color</span>: <select id=digitalReadoutNumberBgColorSelect onChange=parent.digitalReadoutNumberBgColorSelected()></select></td></tr>

<tr  align=center>
<td>
	<button id=drawDigitalReadoutCancelButton disabled title='cancel/remove this circle' onClick=parent.cancelDrawDigitalReadout()>cancel</button>
    <button style='background-color:red;visibility:hidden' id=drawDigitalReadoutDeleteButton  onClick=parent.removeCurrentDrawDigitalReadout()>delete</button>
	<button id=drawDigitalReadoutTopButton style=background:white;font-size:120%;font-weight:bold;color:maroon;visibility:hidden  title='Move to top' onClick=parent.topDrawDigitalReadout()>&#x21E7;</button>
	<button id=drawDigitalReadoutBotButton style=background:white;font-size:120%;font-weight:bold;color:maroon   title='Move to bottom' onClick=parent.botDrawDigitalReadout()>&#x21E9;</button>

    <button id=drawDigitalReadoutFinishButton disabled onClick=parent.finishDrawDigitalReadout()>finish</button>
</td>
</tr>

</table>
</div>


</body>
<script>
function writeDigitalReadoutColorSelection()
{
   var DrawColors=parent.clrArray
	for(var k=0;k<DrawColors.length;k++)
	{
		var name=DrawColors[k][0]
		var myColor=DrawColors[k][1]
		var option=document.createElement("OPTION")
		option.style.backgroundColor=myColor
		option.value=myColor
		option.title=name+" "+myColor
                if(parent.hexString.indexOf(myColor)!=-1)
        option.style.color="white"
		option.text=k
        digitalReadoutFaceColorSelect.appendChild(option)

		var option=document.createElement("OPTION")
		option.style.backgroundColor=myColor
		option.value=myColor
		option.title=name+" "+myColor
                if(parent.hexString.indexOf(myColor)!=-1)
        option.style.color="white"
		option.text=k
       digitalReadoutBorderColorSelect.appendChild(option)


		var option=document.createElement("OPTION")
		option.style.backgroundColor=myColor
		option.value=myColor
		option.title=name+" "+myColor
		option.text=k
                if(parent.hexString.indexOf(myColor)!=-1)
        option.style.color="white"
        digitalReadoutNumberColorSelect.appendChild(option)

		var option=document.createElement("OPTION")
		option.style.backgroundColor=myColor
		option.value=myColor
		option.title=name+" "+myColor
                if(parent.hexString.indexOf(myColor)!=-1)
        option.style.color="white"
		option.text=k
       digitalReadoutNumberBgColorSelect.appendChild(option)
	}

    digitalReadoutFaceColorSelect.selectedIndex=88  //---skyBlue---
    var clr=digitalReadoutFaceColorSelect.options[digitalReadoutFaceColorSelect.selectedIndex].value
   digitalReadoutFaceColorBg.style.backgroundColor=clr

   digitalReadoutBorderColorSelect.selectedIndex=91  //---dodgerBlue---
   var clr=digitalReadoutBorderColorSelect.options[digitalReadoutBorderColorSelect.selectedIndex].value
   digitalReadoutBorderColorBg.style.backgroundColor=clr

	digitalReadoutNumberColorSelect.selectedIndex=104  //---lime---
     var clr=digitalReadoutNumberColorSelect.options[digitalReadoutNumberColorSelect.selectedIndex].value
   digitalReadoutNumberColorBg.style.backgroundColor=clr

	digitalReadoutNumberBgColorSelect.selectedIndex=1 //---black---
	var clr=digitalReadoutNumberBgColorSelect.options[digitalReadoutNumberBgColorSelect.selectedIndex].value
   digitalReadoutNumberBgColorBg.style.backgroundColor=clr





}



function sendSize()
{
   writeDigitalReadoutColorSelection()

   var width=containerDiv.scrollWidth+15
   var height=containerDiv.scrollHeight+30

   parent.sizeFrame('addElemDigitalReadout',width,height)


     if(parent.EditDigitalReadout==true)
        parent.setEditDigitalReadout()
        else
       parent.startDigitalReadoutDraw()

}


</script>
</html>